<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<u-icon name="arrow-left" size="44" style="position: relative;top: -80rpx;" @click="back"></u-icon>
			<view class="u-text-center">
				<view class="u-font-32"><text>我的碳积分</text></view>
				<view class="u-flex u-m-t-20">
					<view class="u-flex-1">
						<text class="u-font-64">{{integral}}</text>
						<text class="u-font-24">分</text>
					</view>
				</view>
			</view>
			<view class="u-text-right u-m-t-30" @click="show = true">
				<u-icon name="question-circle" size="30" color="#ffffff"></u-icon>
				<text class="u-p-l-4">积分规则</text>
			</view>
		</view>
		
		<!-- 积分细则 -->
		<view class="tabs-item">
			<view class="item-header">积分明细</view>
			<view v-if="list.length > 0">
				<u-cell-group>
					<u-cell-item v-for="(item,index) in list" :key="index" :arrow="false">
						<view slot="title">
							<view><text class="u-font-32">{{item.integraltype}}</text></view>
							<view><text class="u-font-24 u-tips-color">{{item.createddatetime}}</text></view>
						</view>
						<view><text class="u-font-28">{{item.remarks}}</text></view>

						<text v-if="item.integrals > 0" class="u-main-color u-font-32 color-success">+{{item.integrals}}<text class="u-font-24">分</text></text>
						<text v-else class="u-main-color u-font-32 color-danger">{{item.integrals}}<text class="u-font-24">分</text></text>
					</u-cell-item>
				</u-cell-group>
				<view class="u-p-t-30">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
			
			<view v-else class="nomore u-p-t-80 u-p-b-40">
				<u-empty text="您还没有相关的余额明细" mode="list"></u-empty>
			</view>
		</view>
		
		<!-- 积分细则弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="14" width="650rpx" height="80vh" closeable>
			<view class="u-p-60 text-content">
				<view class="title">如何获得积分？</view>
				<view class="desc">在青猿回收小程序下单并成功回收，或去青猿回收站点成功回收，您获得回收金额后，系统将额外发放同数值积分到账户。</view>
				<view class="u-m-t-20"></view>
				<view class="title">积分计算</view>
				<view class="desc">从2024年7月3日上线积分功能后，积分开始积累。</view>
				<view class="u-m-t-20"></view>
				<view class="title">积分使用？</view>
				<view class="desc">积分仅可在青猿回收小程序内使用。</view>
				<view class="desc">可用于:参与活动、兑换现金券、抽奖等。也可以去青猿回收线下站点积分兑换区内兑换相应商品；</view>
				<view class="desc">注:</view>
				<view class="desc">积分使用后无法退还，兑换所需要的积分数量可能发生变动，具体以实际兑换所需积分数量为准。</view>
				<view class="u-m-t-20"></view>
				<view class="title">积分有效期、扣减说明</view>
				<view class="desc">1、通过特定活动获得的积分，以具体活动规则为准。您可以进入"青猿回收小程序->碳积分"查看积分相关情况；</view>
				<view class="desc">2、积分不能提现，积分使用后，不支持退还;</view>
				<view class="u-m-t-20"></view>
				<view class="title">其他说明</view>
				<view class="desc">1、积分活动暂时只对青猿小程序个人用户进行开放；</view>
				<view class="desc">2、青猿回收有权确定及调整积分的规则、回馈积分的产品等;</view>
				<view class="desc">3、如用户账号注销使用，则青猿平台将同步注销该用户账号内积分相关使用权益;</view>
				<view class="desc">4、当回收订单状态发生改变，平台则需要扣减该笔订单发放的积分;</view>
				<view class="desc">5、以上积分规则自2024年7月3日生效。</view>
				
				<view class="u-p-t-30">
					<u-button @click="show = false">点击关闭</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PageIndex: 1,
				PageSize: 10,
				loadStatus: 'nomore',
				integral: 0,
				list: [],
				show: false
			};
		},
		onLoad(opt) {
			this.integral = opt.integral
			this.getData()
		},
		methods:{
			back() {
				uni.navigateBack()
			},
			// 获取积分细则
			getData(renew = true){
				this.loadStatus = 'loading'
				if (renew) {
					this.PageIndex = 1
				}
				
				return this.$u.post('/User/ListIntegral', {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				}).then((res) => {
					let data = res
					if (renew) {
						this.list = data
						if (this.list.length < this.PageSize) {
							this.loadStatus = 'nomore'
						}
					} else {
						if (data.length > 0) {
							data.forEach((item) => {
								this.list.push(item)
							})
							if (data.length < this.PageSize) {
								this.loadStatus = 'nomore'
							} else {
								this.loadStatus = 'loadmore'
							}
						} else {
							this.loadStatus = 'nomore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		color: #fff;
		padding: 60rpx 30rpx 30rpx 30rpx;
		margin-bottom: 0;
		/* #ifdef MP-WEIXIN */
		padding-top: calc(44px + 60rpx + var(--status-bar-height));
		/* #endif */
		// border-bottom-right-radius: 60rpx;
		background-color: $u-color-main;
		position: relative;
	
		.tips-box {
			.tips-cell {
				border-radius: 10rpx;
			}
	
			.t-c-small {}
		}
	}
	.tabs-item{
		.item-header{
			padding: 14rpx 30rpx;
		}
	}
	.text-content{
		.title{
			font-size: 36rpx;
			margin-bottom: 10rpx;
			// font-weight: bold;
		}
		.desc{
			color: $u-color-secondary;
		}
	}
</style>
